<!-- 纵向布局 -->
<template>
  <el-container class="layout-vertical">
    <el-aside>
      <div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }">
        <div class="logo flx-center">
          <img src="@/assets/images/logo.svg" alt="logo" />
          <span v-show="!isCollapse">Geeker Admin</span>
        </div>
      </div>
      <el-scrollbar>
        <el-menu
          :default-active="activeMenu"
          :router="false"
          :collapse="isCollapse"
          :collapse-transition="false"
          :unique-opened="true"
          background-color="#191a20"
          text-color="#bdbdc0"
          active-text-color="#409EFF"
        >
          <SubMenu :menuList="menuList" />
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header>
        <ToolBarLeft />
        <ToolBarRight />
      </el-header>
      <Main />
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { GlobalStore } from '@/store'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'
import ToolBarLeft from '@/layouts/components/Header/ToolBarLeft.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
import Main from '@/layouts/components/Main/index.vue'
import { AuthStore } from '@/store/modules/auth'

const route = useRoute()
const globalStore = GlobalStore()
const authStore = AuthStore()
const activeMenu = computed(() => route.path)
const menuList = computed(() => authStore.showMenuListGet)
const isCollapse = computed(() => globalStore.themeConfig.isCollapse)
</script>
<style lang="scss">
.is-active > .el-sub-menu__title {
  color: #f4f4f5 !important;
}
</style>
<style scoped lang="scss">
@import './index.scss';
</style>
